<template>
    <div class="container">
        <div class="body_wrap">
            <el-card shadow="hover" ref="content_card">
                <div ref="loginTotalChart" class="login_chart"></div>
            </el-card>
        </div>
    </div>
</template>

<script>
export default {
    components: {},
    // 接收tab传入过来的参数
    props: {
        params: {
            type: Object
        }
    },

    data() {
        return {
            echarts: null,
            totalDatas: [],
            hours: [
                "00-02",
                "02-04",
                "04-06",
                "06-08",
                "08-10",
                "10-12",
                "12-14",
                "14-16",
                "16-18",
                "18-20",
                "20-22",
                "22-24"
            ]
        };
    },

    created() {
        this.queryParams.type = this.params.type;
    },

    mounted() {
        this.$nextTick(() => {
            this.initChart();
            window.addEventListener("resize", this.screenAdapter);

            this.getTotalLoginReport();
        });
    },

    destroyed() {
        window.removeEventListener("resize", this.screenAdapter);
    },

    methods: {
        /**
         * 统计用户登录
         * 两小时一组，24小时
         */
        async getTotalLoginReport() {
            const res = await this.$http({
                url: "/system/log_login/totalLoginTimeReport",
                method: "GET"
            });
            if (this.ResultMessage(res, false)) {
                this.totalDatas = res.data;

                this.echarts.setOption({
                    series: [
                        {
                            data: this.totalDatas
                        }
                    ]
                });
            }
        },

        initChart() {
            this.echarts = this.$echarts.init(
                this.$refs.loginTotalChart,
                "macarons"
            );

            this.echarts.setOption({
                title: {
                    text: "用户登录时间分布",
                    top: "8px",
                    left: "8px",
                    textStyle: {
                        fontSize: 14,
                        color: "#515a6e",
                        fontWeight: "bold"
                    }
                },
                grid: {
                    top: "50px",
                    left: "3%",
                    right: "6%",
                    bottom: "3%",
                    containLabel: true
                },
                xAxis: {
                    data: this.hours
                },
                yAxis: {},
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                        z: 0,
                        label: {
                            backgroundColor: "#283b56"
                        }
                    }
                },
                series: [
                    {
                        name: "用户登录时间分布",
                        type: "bar",
                        data: this.totalDatas,
                        label: {
                            show: true,
                            position: "top"
                        },
                        itemStyle: {
                            color: "#188df0"
                        }
                    }
                ]
            });
        },

        screenAdapter() {
            this.echarts.resize();
        }
    }
};
</script>

<style lang="scss" scoped>
.login_chart {
    font-size: 14px;
    height: 400px;
    width: 100%;
}
</style>
